import Observe from "./observe.js"
import Compile from "./compile.js"


export default class Vue {
    constructor(option){
        // 1、存储数据到实例 vm
        this.$el = option.el
        this.$data = option.data
        // callback 用于存储 watcher update()后的callback
        this.$callback = {}

        // 2、注入 data 数据到实例 vm
        // 其实是非必要的，主要是方便后面使用；例如可以直接通过实例获取数据：vm.msg = "xxx";
        this.proxyData(this.$data)    

        // 3、data 的所有子孙属性注入 getter、setter 用于实现双向绑定
        new Observe(this)

        // 4、编译插值表达式、v-mode等指令
        new Compile(this)
    }

    // 非必要方法，本示例中未处理；
    // 主要是方便后面使用；例如可以直接通过实例获取数据：vm.msg = "xxx";
    proxyData(){

    }
}


// // 事件中心
// let eventHub = new Vue()

// // 组件A：发布者
// addTodo: function (){
//     eventHub.$emit('add-todo', { text: this.newTodoText })
//     this.newTodoText = ''
// }

// // 组件B：订阅者
// created: function (){
//     eventHub.$on('add-todo',this.addTodo)
// }


// 遗留问题：
// 1、监听数组的变化？数组的数据驱动渲染是怎样实现的？——参考v-for的原理
// 2、_proxyData的作用？跟双向绑定原理无关紧要，只是方便vm取值
// person.name为啥没有注入？如果使用person.name作为指令，怎么使用？
// 3、<input type="text" v-model="person.name"> 是可以这么用的？但代码中没有兼容！
// 4、vue.set的原理